<!--岗位信息子页面-->
<template>
  <div class="container">
    <div>
      <el-table :data="tableData_Users" style="width: 100%">
        <el-table-column prop="username" label="用户名"></el-table-column>
        <el-table-column prop="true_name" label="主管名称"></el-table-column>
        <el-table-column prop="roleName" label="主管权限"></el-table-column>
        <el-table-column prop="email" label="电子邮箱"></el-table-column>
        <el-table-column align="right">
          <template slot-scope="scope">
            <el-button size="mini" @click="update(scope.row.username)">编辑</el-button>
            <el-button @click="deleteUser(scope.row.username)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--   添加项目弹框-->
    <el-dialog title="修改权限" :visible.sync="addDialogVisible" width="40%">
      <el-form ref="add_form_ref" :model="add_form">
        <el-select v-model="add_form.role_id" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.role_id"
            :label="item.role_name"
            :value="item.role_id"
          ></el-option>
        </el-select>
      </el-form>
      {{add_form}}
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateAccess">修 改</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData_Users: [],
      options: [],
      value: "",
      addDialogVisible: false,
      add_form: {
        username: "",
        role_id: ""
      }
    };
  },
  methods: {
    update(username) {
      this.getRole();
      this.add_form.username = username;
      this.addDialogVisible = true;
    },
    getRole() {
      let data = { token: this.$store.state.token };
      this.$http.post("/getRole", data).then(res => {
        this.options = res.data;
        this.options[this.options.length] = {
          role_id: 0,
          role_name: "无权限"
        };
        console.log(this.options);
      });
    },
    getUser() {
      let data = { token: this.$store.state.token };
      this.$http.post("/getUser", data).then(res => {
        this.tableData_Users = res.data;
      });
    },
    deleteUser(id) {
      // console.log(id)
      let data = { token: this.$store.state.token, username: id };
      this.$http.post("/deleteUser", data).then(res => {
        if (res.data.code === 200) {
          this.$message({
            message: "删除成功",
            type: "success"
          });
          this.fetch();
        } else {
          this.$message.error("无权限");
        }
      });
    },
    updateAccess() {
      let data = {
        token: this.$store.state.token,
        username: this.add_form.username,
        role_id: this.add_form.role_id
      };
      this.$http.post("/updateAccess", data).then(res => {
        if (res.data.result == "success") {
          this.$message({
            message: "修改成功",
            type: "success"
          });
        } else {
          this.$message({
            message: "无权限",
            type: "error"
          });
        }
      });
    }
  },
  created() {
    this.getUser();
  }
};
</script>

<style scoped>
.container .box {
  float: top;
}
.box {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
</style>
